<template>
  <div class="data-index">
		<main class="main">
			<div class="main-top">
				<el-row class="clearfix" :gutter="30">
					<el-col :sm="24" :md="9" :lg="9">
						<div class="main-top-col-1-1">
							<item-title title="用户数据">
								<div class="date-types">
									<ul>
										<li 
											v-for="(data,index) in dataTypes" 
											:key="index" 
											:class="{active: dataTypesIndex==index}" 
											@click="choseDateType(index,1)">
											{{data}}
										</li>
									</ul>
									<div class="current-bg" :style="Left"></div>
								</div>
							</item-title>
							<div class="chart-box chart-box-border">
								<angle-arrow></angle-arrow>
								<ul class="user-data">
									<li v-for="(data,index) in userDataTop.statistics" :key="index">
										<p>{{data.key}}</p>
										<i-count-up :start="0" :endVal="data.value" :decimals="5" :duration="2.5" v-if="index!=4"></i-count-up>
										<span v-else>
											<em v-if="(userDataTop.statistics[1].value / userDataTop.statistics[2].value * 100).toFixed(2)!='NaN'">
												{{(userDataTop.statistics[1].value / userDataTop.statistics[2].value * 100).toFixed(2)}}%
											</em>
											<em v-else>0%</em>
										</span>
									</li>
								</ul>
							</div>
						</div>
						<div class="main-top-col-1-2">
							<div class="chart-box chart-box-border">
								<angle-arrow></angle-arrow>
								<item-title title="在线人数"></item-title>
								<line-chart
									:title="userDataTop.title"
									:series="userDataTop.series"
									ref="lineChart">
								</line-chart>
							</div>
						</div>
					</el-col>
					<el-col :sm="24" :md="6" :lg="6">
						<div class="chart-box chart-box-border">
							<angle-arrow></angle-arrow>
							<item-title title="页面访问数据">
								<div class="chart-select">
									<a href="javascript:void(0);" class="detail" @click="more">详情</a>
									<el-select v-model="form1.year" @change="choseDatesType($event,1)">
										<el-option v-for="(data,index) in pageDateData" :key="index" :value="data.value" :label="data.label">{{data.label}}</el-option>
									</el-select>
								</div>
							</item-title>
							<across-pillar :yAxisData="pageyAxisData" :yAxisName="'人次'" :arrData="pageAxisData"></across-pillar>
						</div>
					</el-col>
					<el-col :sm="24" :md="9" :lg="9">
						<div class="main-top-col-3-1">
							<item-title title="商家数据">
								<div class="date-types">
									<ul>
										<li 
											v-for="(data,index) in dataTypes" 
											:key="index" 
											:class="{active: storeDataTypeIndex==index}" 
											@click="choseDateType(index,2)">
											{{data}}
										</li>
									</ul>
									<div class="current-bg" :style="storeDataTypeLeft"></div>
								</div>
							</item-title>
							<div class="chart-box chart-box-border">
								<angle-arrow></angle-arrow>
								<ul class="merchant-data">
									<li v-for="(data,index) in merchantData" :key="index">
										<p>{{data.key}}</p>
										<i-count-up :start="0" :endVal="data.value" :decimals="5" :duration="2.5"></i-count-up>
									</li>
								</ul>
							</div>
						</div>
						<div class="main-top-col-3-2">
							<item-title title="端口日活量(UV)"></item-title>
							<div class="chart-box chart-box-border">
								<angle-arrow></angle-arrow>
								<!-- <ring-round :pieDatas="storeRatio"></ring-round> -->
								<ul class="user-data">
									<li v-for="(data,index) in entryCounts" :key="index">
										<p>{{data.key}}</p>
										<i-count-up :start="0" :endVal="data.value" :decimals="5" :duration="2.5" :options="{suffix: '人'}"></i-count-up>
									</li>
								</ul>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="main-bottom">
				<el-row class="clearfix" :gutter="30">
					<el-col :sm="24" :md="12" :lg="12">
						<div class="chart-box chart-box-border">
							<angle-arrow></angle-arrow>
							<item-title title="PV用户量/ UV浏览量">
								<div class="chart-select">
									<el-date-picker
										v-model="form2.year"
										type="month"
										placeholder="选择年月"
										@change="changeDateMonth($event,2)"
										format="yyyy-MM"
										value-format="yyyy-MM"
										:clearable="false"
										popper-class="chart-data-select">
									</el-date-picker>
									<div class="chart-datetype">
										<ul>
											<li 
												:class="{active: pvDataIndex==index}" 
												v-for="(data,index) in Dates.dataTypes" 
												:key="index" 
												@click="choseDatesType(index,2)">
												{{data.label}}
											</li>
										</ul>
									</div>
								</div>
							</item-title>
							<double-pillar 
								:title="PVUVtitle"
								:series="PVUV" 
								:dataAxis="PVUVAxis"
								:delay:="1800">
							</double-pillar>
						</div>
					</el-col>
					<el-col :sm="24" :md="12" :lg="12">
						<div class="chart-box chart-box-border">
							<angle-arrow></angle-arrow>
							<item-title title="订单成交量/商家活跃数">
								<div class="chart-select">
									<el-date-picker
										v-model="form3.year"
										type="month"
										placeholder="选择年月"
										@change="changeDateMonth($event,3)"
										format="yyyy-MM"
										value-format="yyyy-MM"
										:clearable="false"
										popper-class="chart-data-select">
									</el-date-picker>
									<div class="chart-datetype">
										<ul>
											<li 
												:class="{active: orderDataIndex==index}" 
												v-for="(data,index) in Dates.dataTypes" 
												:key="index" 
												@click="choseDatesType(index,3)">
												{{data.label}}
											</li>
										</ul>
									</div>
								</div>
							</item-title>
							<double-pillar
								:title="orderTitle"
								:series="order" 
								:dataAxis="orderAxis">
							</double-pillar>
						</div>
					</el-col>
				</el-row>
			</div>
		</main>
	</div>
</template>

<script>
	import Dates from '@/statistics/dates.json'
	import ICountUp from 'vue-countup-v2'
	import itemTitle from '../../components/data-tit.vue'
	import doublePillar from '../../components/double-pillar.vue'
	import angleArrow from '../../components/angle-arrow.vue'
	import lineChart from '../../components/line-chart.vue'
	import acrossPillar from '../../components/across-pillar.vue'
	import ringRound from '../../components/ring-round.vue'
	import recordTable from "../user/record-table.vue";
	import { Loading } from 'element-ui';
	export default {
		components: {
			ICountUp,
			itemTitle,
			doublePillar,
			angleArrow,
			lineChart,
			acrossPillar,
			ringRound
		},
		data(){
			return{
				Dates: Dates,
				// 用户数据
				dataTypes: ['今日','昨日','本周','上周','本月','上月','今年','去年'],
				dataTypesIndex: 0,
				userDataTop: {
					title: ['今日在线人数','昨日在线人数'],
					series: [],
					statistics: [{
						key: '每日PV量',
						value: 0
					},{
						key: '每日UV量',
						value: 0
					},{
						key: '用户总数',
						value: 0
					},{
						key: '用户增长数',
						value: 0
					},{
						key: '用户活跃率',
						value: 0
					}]
				},
				merchantData: [{
					key: '增长订单量',
					value: 0
				},{
					key: '增长订单金额',
					value: 0
				},{
					key: '下单商家',
					value: 0
				},{
					key: '商家增长数',
					value: 0
				},{
					key: '商家活跃度',
					value: 0
				},{
					key: '商家总数',
					value: 0
				}],
				// 页面访问数据
				form1: {
					year: 'today'
				},
				pageDateData: [{
					label: '今日',
					value: 'today'
				},{
					label: '昨日',
					value: 'yesterday'
				},{
					label: '本周',
					value: 'week'
				},{
					label: '上周',
					value: 'lastWeek'
				},{
					label: '本月',
					value: 'month'
				},{
					label: '上月',
					value: 'lastMonth'
				},{
					label: '今年',
					value: 'year'
				},{
					label: '去年',
					value: 'lastYear'
				}],
				pageyAxisData: [],
				pageAxisData: [],
				// PV/UV数据
				pvDataIndex: 1,
				form2: {
					year: new Date(new Date()).Format('yyyy-MM')
				},
				PVUVtitle: ['PV/百','UV/个'],
				PVUV: [],
				PVUVAxis: [],
				// 商家比例
				storeDataTypeIndex: 4,
				storeRatio: [],
				// 订单成交量
				form3: {
					year: new Date(new Date()).Format('yyyy-MM')
				},
				orderDataIndex: 0,
				orderTitle: ['订单成交量/千','商家活跃数'],
				order: [],
				orderAxis: [],
				Interval: '',
				entryCounts: [{
					key: 'App',
					value: 0
				},{
					key: '小程序',
					value: 0
				},{
					key: 'PC',
					value: 0
				},{
					key: 'H5',
					value: 0
				}]
			}
		},
		methods: {
			more() {
			  this.layerIndex = this.$layer.iframe({
			    content: {
			      content: recordTable, //传递的组件对象
			      parent: this, //当前的vue对象
			      data: {}, //props
			    },
			    area: ["70%", "60%"],
			    title: "实时浏览记录",
			    maxmin: true,
			    cancel: () => {},
			  });
			},
			init(){
				this.getUserDataTop('today')
				this.getUserPuData(3,'pvuv')
				this.getUserPageData()
				this.getStoreDataTable(2)
				this.getStoreBaseData('month')
			},
			// 用户数据&在线人数
			getUserDataTop(time){
				let loadingInstance = Loading.service({
					text: '加载中',
					background: 'rgba(255,255,255,.1)',
				});
				this.$http(this.$ptApiList.UserDataTop,{time: time}).then(res => {
					loadingInstance.close()
					let todayObj = {
						name: '今日在线人数',
						data: [],
						type: 'line',
						itemStyle: {
						  color: "#f9764c",
						},
						lineStyle: {
							width: 3
						},
					}
					let yestodayObj = {
						name: '昨日在线人数',
						data: [],
						type: 'line',
						itemStyle: {
						  color: "#00fbfc",
						},
						lineStyle: {
							width: 3
						}
					}
					res.datas.online_today.forEach(item => {
						todayObj.data.push(item.num)
					})
					res.datas.online_yesterday.forEach(item => {
						yestodayObj.data.push(item.num)
					})
					this.userDataTop.series.push(todayObj,yestodayObj)
					this.userDataTop.statistics[0].value = res.datas.statistics.pv
					this.userDataTop.statistics[1].value = res.datas.statistics.uv
					this.userDataTop.statistics[2].value = res.datas.statistics.allUserNum
					this.userDataTop.statistics[3].value = res.datas.statistics.addUserNum
					this.userDataTop.statistics[4].value = res.datas.statistics.userOnlieNum
					this.entryCounts[0].value = res.datas.statistics.client_app
					this.entryCounts[1].value = res.datas.statistics.client_sm
					this.entryCounts[2].value = res.datas.statistics.client_pc
					this.entryCounts[3].value = res.datas.statistics.client_h5
				})
			},
			// PV用户量/ UV浏览量
			getUserPuData(type,colum){
				let data = {}
				let yearDate,
						year,
						month,
						today,
						days = []
				if(colum==='pvuv'){
					yearDate = new Date(Date.parse(this.form2.year))
					year = yearDate.getFullYear()
					month = yearDate.getMonth() + 1
					today = new Date(new Date()).Format('d')
					let currentYear = new Date().getFullYear()
					let currentMonth = new Date().getMonth()+1
					let dayCount
					if(currentYear==year && currentMonth==month){
						dayCount = today
					}else{
						dayCount = this.getDaysInMonth(year,month)
					}
					for(var i=0;i < dayCount;i++){
						days.push((i+1) + '日')
					}
					data = {
						type: type,
						time: this.form2.year,
						page_type: 1,
						limit: 12,
						page: 0
					}
				}
				if(this.pvDataIndex==1){
					data.limit = this.getDaysInMonth(year,month) + 1
				}
				let loadingInstance = Loading.service({
					text: '加载中',
					background: 'rgba(255,255,255,.1)',
				});
				this.$http(this.$ptApiList.UserPuData,data).then(res => {
					loadingInstance.close()
					if(colum==='pvuv'){
						if(res.datas.uv.length || res.datas.pv.length){
							this.PVUV = [];
							this.PVUVAxis = [];
							if(this.pvDataIndex==0){
								this.PVUVAxis = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
							}else{
								this.PVUVAxis = days
							}
							let uvObj = {
								data: [],
								name: 'UV/个',
								type: 'bar',
								itemStyle: {
									color: "#067add"
								},
								itemStyleArray: [{
									offset: 0,
									color: "#fff",
								},{
									offset: 0.2,
									color: "#067add",
								},{
									offset: 1,
									color: "transparent",
								}],
							}
							let pvObj = {
								data: [],
								name: 'PV/百',
								type: 'bar',
								itemStyle: {
									color: "#f9764c"
								},
								itemStyleArray: [{
									offset: 0,
									color: "#fff",
								},{
									offset: 0.2,
									color: "#f9764c",
								},{
									offset: 1,
									color: "transparent",
								}]
							}
							// res.datas.uv.forEach(item => {
							// 	uvObj.data.push(item.count)
							// })
							// res.datas.pv.forEach(item => {
							// 	pvObj.data.push((item.num / 100).toFixed(2))
							// })
							let startMonth = 1
							if(res.datas.uv){
								res.datas.uv.forEach((item,index) => {
									if(index==0){
										startMonth = item.add_time - 1
									}
									for (let i=0;i<startMonth;i++){
										uvObj.data[i] = 0
									}
									uvObj.data.push((item.count))
								})
							}
							if(res.datas.pv.length){
								res.datas.pv.forEach((item,index) => {
									if(index==0){
										startMonth = item.add_time - 1
									}
									for (let i=0;i<startMonth;i++){
										pvObj.data[i] = 0
									}
									pvObj.data.push((item.num / 100).toFixed(2))
								})
							}
							this.PVUV.push(pvObj,uvObj)
						}else if(!res.datas.uv.length && !res.datas.pv.length){
							if(this.pvDataIndex==0){
								this.$confirm(year+'年没有数据，请重新选择', '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
									showCancelButton: false
								}).then(() => { })
							}else if(this.pvDataIndex==1){
								this.$confirm(year+'-'+month+'月没有数据，请重新选择', '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
									showCancelButton: false
								}).then(() => { })
							}
						}
					}
				})
			},
			// 页面访问数据
			getUserPageData(){
				let data = {}
				let yearDate,
						year,
						month,
						days = []
				yearDate = new Date(Date.parse(this.form2.year))
				year = yearDate.getFullYear()
				month = yearDate.getMonth() + 1
				for(var i=0;i<this.getDaysInMonth(year,month);i++){
					days.push((i+1) + '日')
				}
				data = {
					time: this.form1.year,
					page_type: 1,
					limit: 20,
					page: 0
				}
				let loadingInstance = Loading.service({
					background: 'rgba(255,255,255,.1)',
					text: '加载中'
				});
				this.$http(this.$ptApiList.UserPageData,data).then(res => {
					loadingInstance.close()
					this.pageAxisData = [];
					this.pageyAxisData = [];
					let pageUv = {
						data: [],
						name: '访问次数',
						type: 'bar',
						label: {
							show: true,
							position: 'right',
							color: '#FFF',
							fontSize: 10,
							formatter: '{c} 次'
						},
						itemStyle: {
							color: '#067cde'
						},
					}
					let pageUvData = []
					let pageyAxisData = []
					if(res.datas.img.length){
						res.datas.img.forEach(item => {
							let name = item.where.split('-')
							pageUvData.push(item.count)
							pageyAxisData.push(item.where.slice(0,5))
						})
						pageUv.data = pageUvData.reverse()
						this.pageyAxisData = pageyAxisData.reverse()
						this.pageAxisData.push(pageUv)
					}
				})
			},
			// 订单成交量&商家数
			getStoreDataTable(type){
				let data = {}
				let yearDate,
						year,
						month,
						today,
						days = []
				yearDate = new Date(Date.parse(this.form3.year))
				year = yearDate.getFullYear()
				month = yearDate.getMonth() + 1
				today = new Date(new Date()).Format('d')
				let currentYear = new Date().getFullYear()
				let currentMonth = new Date().getMonth()+1
				let dayCount
				if(currentYear==year && currentMonth==month){
					dayCount = today
				}else{
					dayCount = this.getDaysInMonth(year,month)
				}
				for(var i=0;i < dayCount;i++){
					days.push((i+1) + '日')
				}
				data = {
					type: type,
					time: this.form3.year,
					page_type: 1,
					limit: 12,
					page: 0
				}
				if(this.orderDataIndex==1){
					data.limit = this.getDaysInMonth(year,month) + 1
				}
				let loadingInstance = Loading.service({
					text: '加载中',
					background: 'rgba(255,255,255,.1)',
				});
				this.$http(this.$ptApiList.StoreDataTable,data).then(res => {
					loadingInstance.close()
					if(res.datas.order.length || res.datas.store.length){
						if(this.orderDataIndex==0){
							this.orderAxis = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
						}else{
							this.orderAxis = days
						}
						let orderObj = {
							data: [],
							name: '订单成交量/千',
							type: 'bar',
							itemStyle: {
								color: "#f9cd02"
							},
							itemStyleArray: [{
								offset: 0,
								color: "#fff",
							},{
								offset: 0.2,
								color: "#067add",
							},{
								offset: 1,
								color: "transparent",
							}]
						}
						let storeObj = {
							data: [],
							name: '商家活跃数',
							type: 'bar',
							itemStyle: {
								color: "#01e8ed"
							},
							itemStyleArray: [{
								offset: 0,
								color: "#fff",
							},{
								offset: 0.2,
								color: "#f9764c",
							},{
								offset: 1,
								color: "transparent",
							}]
						}
						if(res.datas.order){
							res.datas.order.forEach(item => {
								orderObj.data.push((item.num / 1000).toFixed(4))
							})
						}
						if(res.datas.store.length){
							let startMonth = 1
							res.datas.store.forEach((item,index) => {
								if(index==0){
									startMonth = item.add_time - 1
								}
								for (let i=0;i<startMonth;i++){
									storeObj.data[i] = 0
								}
								storeObj.data.push(item.num)
							})
						}
						this.order.push(orderObj,storeObj)
					}else if(!res.datas.order.length && !res.datas.store.pv.length){
						if(this.orderDataIndex==0){
							this.$confirm(year+'年没有数据，请重新选择', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
								showCancelButton: false
							}).then(() => { })
						}else if(this.orderDataIndex==1){
							this.$confirm(year+'-'+month+'月没有数据，请重新选择', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
								showCancelButton: false
							}).then(() => { })
						}
					}
				})
			},
			// 获取商家基本数据
			getStoreBaseData(time){
				let data = {
					time: time
				}
				this.$http(this.$ptApiList.StoreBaseData,data).then(res => {
					this.merchantData[0].value = res.datas.order_count_add
					this.merchantData[1].value = res.datas.order_sum_add
					this.merchantData[2].value = res.datas.order_store_num
					this.merchantData[3].value = res.datas.store_count_add
					this.merchantData[4].value = res.datas.online_store_num
					this.merchantData[5].value = res.datas.all_store_num
					this.storeRatio.push(
						{
							name: '商家比例',
							type: 'pie',
							radius: '80%',
							center: ['50%', '50%'],
							label: {
								show: true,
								alignTo: 'labelLine',
								bleedMargin: 5,
								formatter: function(e){
									return (e['name'] + ' \n ' + (e['data'].datas[0] / e['data'].datas[1] * 100).toFixed(2)+'%')
								},
							},
							avoidLabelOverlap: true,
							emphasis: {
								label: {
									show: true,
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: true,
								length: 0,
								length2: 50,
								color: '#00ffff'
							},
							data: [
								{
									value: res.datas.return_store_num,
									name: '复购',
									itemStyle: {
										color: '#067cde',
									},
									datas: [
										res.datas.return_store_num,
										res.datas.all_store_num
									],
								},
								{
									value: res.datas.online_store_num, 
									name: '活跃商家',
									itemStyle: {
										color: '#03f6fb',
									},
									datas: [
										res.datas.online_store_num,
										res.datas.all_store_num
									]
								},
								{
									value: res.datas.order_store_num, 
									name: '成交商家',
									itemStyle: {
										color: '#fdce03',
									},
									datas: [
										res.datas.order_store_num,
										res.datas.all_store_num
									]
								}
							]
						}
					)
				})
			},
			// 获取某年某月所有天数
			getDaysInMonth(year,month){
				month = parseInt(month, 10);
				var temp = new Date(year, month ,0);
				return temp.getDate();
			},
			// 选择日期类型
			choseDatesType(e,index){
				switch (index){
					case 1:
						this.pageyAxisData = []
						this.pageAxisData = []
						this.getUserPageData()
						break;
					case 2:
						this.pvDataIndex = e
						this.PVUVAxis = []
						this.PVUV = []
						if(e==0){
							this.getUserPuData(2,'pvuv')
						}else{
							this.getUserPuData(3,'pvuv')
						}
						break;
					case 3:
						this.orderDataIndex = e
						this.order = []
						this.orderAxis = []
						if(e==0){
							this.getStoreDataTable(2)
						}else{
							this.getStoreDataTable(3)
						}
						break;
				}
			},
			// 选择年月
			changeDateMonth(e,index){
				switch (index){
					case 1:
						this.pageyAxisData = []
						this.pageAxisData = []
						this.getUserPageData()
						break;
					case 2:
						this.PVUVAxis = []
						this.PVUV = []
						if(this.pvDataIndex==0){
							this.getUserPuData(2,'pvuv')
						}else{
							this.getUserPuData(3,'pvuv')
						}
						break;
					case 3:
						this.order = []
						this.orderAxis = []
						if(this.orderDataIndex==0){
							this.getStoreDataTable(2)
						}else{
							this.getStoreDataTable(3)
						}
						break;
				}
			},
			// 选择日期类型
			choseDateType(index,type){
				let time = ''
				switch (index){
					case 0:
						time = 'today'
						break;
					case 1:
						time = 'yesterday'
						break;
					case 2:
						time = 'week'
						break;
					case 3:
						time = 'lastWeek'
						break;
					case 4:
						time = 'month'
						break;
					case 5:
						time = 'lastMonth'
						break;
					case 6:
						time = 'year'
						break;
					case 7:
						time = 'lastYear'
						break;
				}
				if(type==1){
					this.dataTypesIndex = index
					this.userDataTop.series = []
					this.getUserDataTop(time)
				}else if(type==2){
					this.storeDataTypeIndex = index
					this.storeRatio = []
					this.getStoreBaseData(time)
				}
			},
			// 计算整点进行请求数据
			initTime(){
				let time = 60 - new Date().getSeconds(); //获取距离整分时剩的秒数
				const timer =setTimeout(()=>{
					time = 60
					let minutes = new Date().getMinutes();
					if(minutes == 0){
						this.initData();
					}
					// 每一分钟执行一次
					const timer2 = setInterval(()=>{
						let minutes = new Date().getMinutes();
						if(minutes == 0){
							this.initData();
						}
					},time * 1000)
					// 页面销毁清除每分钟的定时器
					this.$once('hook:beforeDestroy',()=>{
					clearInterval(timer2);
					})
					// 清除第一个定时器
					clearTimeout(timer);
				},time * 1000)
				// 以防快速刷新时没清除定时器
				this.$once('hook:beforeDestroy',()=>{
					clearTimeout(timer)
				})
			},
			// 清除数据
			initData(){
				this.pageyAxisData = []
				this.pageAxisData = []
				this.PVUVAxis = []
				this.PVUV = []
				this.order = []
				this.orderAxis = []
				this.init()
			}
		},
		computed: {
			// 用户数据背景定位
			Left(){
				return {
					left: this.dataTypesIndex * 40 + 'px'
				}
			},
			// 商家数据背景定位
			storeDataTypeLeft(){
				return {
					left: this.storeDataTypeIndex * 40 + 'px'
				}
			}
		},
		created(){
			this.init()
			// 定时器，一小时后重新请求数据
			this.initTime();
			// this.Interval = setInterval(() => {
			// 	this.pageyAxisData = []
			// 	this.pageAxisData = []
			// 	this.PVUVAxis = []
			// 	this.PVUV = []
			// 	this.order = []
			// 	this.orderAxis = []
			// 	this.init()
			// },600000)
		},
		deactivated() {
			clearInterval(this.Interval)
		}
	}
</script>
<style lang="scss">
	.chart-select-box{
		background-color: #022672;
		border-color: #01668c;
		box-shadow: 0 0 5px rgba(255,255,255,.5) inset;
		.el-select-dropdown__item{
			color: #06879d !important;
		}
		.selected,.hover{
			background-color: transparent;
			color: #01d7df !important;
		}
		.popper__arrow{
			top: -8px;
			border-bottom-color: #1c3c80 !important;
		}
		.popper__arrow::after{
			border-bottom-color: #02668b !important;
		}
	}
	.chart-data-select{
		.el-month-table td.current.today .cell{
			color: #34a1e0;
		}
		.el-month-table td.today .cell{
			color: #f9764c;
		}
	}
</style>
<style lang="scss" scoped="scoped">
	.data-index{
		.main{
			.date-types{
				height: 22px;
				line-height: 20px;
				background-color: #010332;
				border: solid 1px #0b5c71;
				border-radius: 5px;
				position: relative;
				overflow: hidden;
				.current-bg{
					position: absolute;
					width: 40px;
					height: 22px;
					background-color: #00fbfc;
					top: 0;
					left: 0;
					transition: all .2s;
				}
				ul{
					display: flex;
					align-items: center;
					li{
						width: 40px;
						text-align: center;
						cursor: pointer;
						color: #1ca5c4;
						position: relative;
						z-index: 2;
						font-size: 12px;
						transition: all .2s;
						&.active{
							color: #030e39;
						}
					}
				}
			}
			.chart-box{
				position: relative;
				height: 100%;
				padding: 10px;
				border-radius: 5px;
			}
			.chart-box-border{
				border: solid 1px rgba(0,255,255,.3);
				box-shadow: 0 0 15px rgba(0,252,252,.3) inset;
			}
			.user-data{
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				li{
					flex: 1;
					margin: 0 5px;
					border-radius: 5px;
					border: solid 1px #00ffff;
					box-shadow: 0 0 15px rgba(0,252,252,.9) inset;
					padding: 10px;
					p{
						font-size: 14px;
						color: #FFF;
					}
					span{
						font-size: 24px;
						font-weight: bold;
					}
					&:nth-child(1) span{
						color: #fdcf00;
					}
					&:nth-child(2) span{
						color: #00fbfc;
					}
					&:nth-child(3) span{
						color: #07eda6;
					}
					&:nth-child(4) span{
						color: #f9764c;
					}
					&:nth-child(5) span{
						color: #7ebbff;
					}
				}
			}
			.merchant-data{
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				padding: 0 10%;
				li{
					width: 30%;
					margin: 0 5px;
					border-radius: 5px;
					border: solid 1px #00ffff;
					box-shadow: 0 0 15px rgba(0,252,252,.9) inset;
					padding: 10px;
					p{
						font-size: 14px;
						color: #FFF;
					}
					span{
						font-size: 24px;
						font-weight: bold;
					}
					&:nth-child(1) span{
						color: #fdcf00;
					}
					&:nth-child(2) span{
						color: #00fbfc;
					}
					&:nth-child(3) span{
						color: #07eda6;
					}
					&:nth-child(4) span{
						color: #f9764c;
					}
					&:nth-child(5) span{
						color: #7ebbff;
					}
					&:nth-child(6) span{
						color: #00fbfc;
					}
				}
			}
			.chart-select{
				display: flex;
				align-items: center;
				a.detail{
					color: #FFF;
					font-size: 14px;
					margin-right: 10px;
				}
				/deep/ .el-date-editor,/deep/ .el-select{
					width: 120px;
					&:nth-child(n+1){
						margin-left: 10px;
					}
					.el-input__inner{
						height: 32px;
						line-height: 32px;
						border-color: #02688e !important;
						background-color: #022672 !important;
						color: #FFF;
						&::-webkit-input-placeholder{
							color: #FFF !important;
						}
					}
					.el-input__icon{
						line-height: 32px;
						color: #FFF !important;
					}
				}
			}
			.chart-datetype{
				margin-left: 10px;
				ul{
					display: flex;
					align-items: center;
					border: solid 1px #02688e;
					border-radius: 5px;
					background-color: #022672;
					overflow: hidden;
					li{
						color: #FFF;
						height: 32px;
						line-height: 32px;
						padding: 0 10px;
						cursor: pointer;
						&:first-child{
							border-right: solid 1px #02688e;
						}
						&.active{
							background-color: #00fbfc;
							color: #141414;
						}
					}
				}
			}
			.main-top{
				position: absolute;
				left: 25px;
				right: 25px;
				height: calc(60% - 25px);
				top: 25px;
				.el-row,.el-col{
					position: relative;
					height: 100%;
				}
				.main-top-col-1-1{
					margin-bottom: 30px;
					.chart-box{
						margin-top: 20px;
						height: 125px;
						background-color: #0e2156;
						box-shadow: 0 0 10px rgba(0,252,252,.5) inset;
						&::before,
						&::after{
							content: '';
							position: absolute;
							top: 0;
							left: 50%;
							width: 199px;
							height: 2px;
							transform: translateX(-50%);
							background: url(../../../assets/data-images/tabs-light.png);
						}
						&::after{
							top: initial;
							bottom: 0;
						}
					}
				}
				.main-top-col-1-2{
					height: calc(100% - 207px);
				}
				.main-top-col-3-1{
					margin-bottom: 30px;
					.chart-box{
						margin-top: 20px;
						height: 240px;
						background-color: #0e2156;
						box-shadow: 0 0 10px rgba(0,252,252,.5) inset;
						&::before,
						&::after{
							content: '';
							position: absolute;
							top: 0;
							left: 50%;
							width: 199px;
							height: 2px;
							transform: translateX(-50%);
							background: url(../../../assets/data-images/tabs-light.png);
						}
						&::after{
							top: initial;
							bottom: 0;
						}
					}
				}
				.main-top-col-3-2{
					height: calc(100% - 374px);
					.chart-box{
						margin-top: 20px;
					}
				}
			}
			.main-bottom{
				position: absolute;
				left: 25px;
				right: 25px;
				bottom: 25px;
				height: calc(40% - 50px);
				margin-top: 25px;
				.el-row,.el-col{
					position: relative;
					height: 100%;
				}
			}
		}
	}
	@media only screen and (min-width: 768px){
		.main{
			overflow-y: auto;
			overflow-x: hidden;
		}
	}
</style>